<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">


    // funtional component access ref several components deep
    function CustomTextInput(props) {
        return (
                <div>
                    <input ref={props.inputRef} />
                </div>
        );
    }

    function Parent(props) {
        return (
                <div>
                    My input: <CustomTextInput inputRef={props.inputRef} />
                </div>
        );
    }

    class Grandparent extends React.Component {
        componentDidMount(){
            this.inputElement.focus();
        }

        render() {
            return (
                    <Parent
                            inputRef={el => this.inputElement = el}
                    />
            );
        }
    }

    ReactDOM.render(<Grandparent/>, document.getElementById("example"));

</script>
</body>
</html>

